<template>
    <div class="card mt-2" :id="'reply-'+id">
        <div class="card-header" :class="isBest ?'bg-success' :''">
            <div class="level">
                <h5 class="flex">
                    <a :href="'/profiles/'+reply.owner.name" v-text="reply.owner.name"> </a>
                    回复于
                    <span v-text="ago"></span>
                </h5>
                <div v-if="signedIn">
                    <favorite :reply="reply"></favorite>
                </div>

            </div>
        </div>
        <div class="card-body">
            <div class="card-text">
                <div v-if="editing">
                    <form @submit="update">
                        <div class="form-group">
                            <textarea class="form-control" v-model="body" required></textarea>
                        </div>
                        <button class="btn btn-sm btn-primary">Update</button>
                        <button class="btn btn-sm btn-link" @click="cancelReply" type="button">Cancel</button>
                    </form>
                </div>
                <div v-else v-html="body"></div>
            </div>
        </div>

        <footer class="card-footer level" v-if="authorize('owns',reply) || authorize('owns',reply.thread)">
            <div class="flex" v-if="authorize('owns',reply)">
                <button class="btn btn-sm mr-1" @click="editReply">Edit</button>
                <button class="btn btn-sm mr-1 btn-danger" @click="destroy">Delete</button>
            </div>
            <div>
                <button class="btn btn-sm ml-auto" @click="markBestReply" v-if="authorize('owns',reply.thread)">Best
                    Reply
                </button>
            </div>
        </footer>
    </div>
</template>

<script>
  import Favorite from "./Favorite.vue";
  import moment from 'moment';

  export default {
    props: ['reply'],
    components: {Favorite},
    data() {
      return {
        editing: false,
        id: this.reply.id,
        body: this.reply.body,
        isBest: this.reply.isBest,
      }
    },
    computed: {
      ago() {
        moment.locale('zh-cn');
        return moment(this.reply.created_at).fromNow() + '...';
      }
    },
    created() {
      window.events.$on('best-reply-selected', id => {
        this.isBest = (id === this.id)
      });
    },
    methods: {
      update() {
        axios.patch('/replies/' + this.reply.id, {
          body: this.body
        }).catch(error => {
          flash(error.response.data, 'danger');
        });
        this.editing = false;
        flash('Updated!');
      }
      ,
      destroy() {
        axios.delete('/replies/' + this.id);
        this.$emit('deleted', this.id);
      }
      ,
      editReply() {
        this.old_body_data = this.body;
        this.editing = true;
      }
      ,
      cancelReply() {
        this.body = this.old_body_data;
        this.old_body_data = '';
        this.editing = false;
      }
      ,
      markBestReply() {
        this.isBest = true;
        axios.post('/replies/' + this.id + '/best');
        window.events.$emit('best-reply-selected', this.id);
      }
    }
  }
</script>
